<template>
  <div>
    <auth-search v-show="isSearch"></auth-search>
    <el-row>
      <el-col :span="3">
        <el-button @click="search">{{ `${isSearch ? '关闭' : '打开'}高级搜索` }}</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="reload">刷新鉴权</el-button>
      </el-col>
      <el-col :span="3">
        <el-button @click="insert">新增鉴权</el-button>
      </el-col>

      <!--高级搜索（多条件）-->
    </el-row>
    <auth-add v-show="isAdd"></auth-add>

    <!--  数据表格-->
    <el-table :data="datas">
      <el-table-column prop="id" label="ID" width="100">
        <template slot-scope="scope">
          {{ `${scope.row.id.substring(0, 8)}···`}}
        </template>
      </el-table-column>
      <el-table-column prop="serviceName" label="服务名称"></el-table-column>
      <el-table-column prop="method" label="请求方式"></el-table-column>
      <el-table-column prop="route" label="路由"></el-table-column>
      <el-table-column prop="uri" label="URI"></el-table-column>
      <el-table-column label="角色">
        <template slot-scope="scope">
          <el-tag v-for="item in scope.row.authRoles" :key="item.id" type="success">{{ item }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operUser" label="上一次操作UserAccount"></el-table-column>
      <el-table-column label="仅需要检查登录">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.onlyCheckLogin==true" type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否非注解鉴权">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isDefault==true" type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="是否开启">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isOpen==true" type="success">是</el-tag>
          <el-tag v-else type="danger">否</el-tag>
        </template>
      </el-table-column>
      <!--   操作  鉴权开启 关闭-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!--        开启鉴权-->
          <el-button type="primary" size="mini" @click="openAuth(scope.row)" v-if="!scope.row.isOpen">开启</el-button>
          <!--        关闭鉴权-->
          <el-button type="warning" size="mini" @click="closeAuth(scope.row)" v-else>关闭</el-button>
          <!--        删除-->
          <el-button type="danger" size="mini" @click="delAuth(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import authSearch from "@/view/auth-admin/auth-search";
import {AuthApi} from "@/core/request/api/AuthApi";
import authAdd from "@/view/auth-admin/auth-add";

export default {
  name: "authPage",
  components: {authSearch,authAdd},
  data() {
    return {
      datas: null,
      isSearch: false,
      isAdd:false
    }
  },
  methods: {
    search() {
      this.isSearch ^= 1
    },
    insert() {
      this.isAdd ^= 1
    },
    reload() {
      this.axios.get(AuthApi.reload).then(res => {
        if (!res.data.code) {
          this.$message.success("刷新成功")
        }
      })
    },
    openAuth(data) {
      this.axios.put(AuthApi.open, {id: data.id}).then(
          res => {
            if (!res.data.code) {
              data.isOpen = true
              this.$message.success("开启鉴权成功")
            }
          }
      )
    },
    closeAuth(data) {
      this.axios.put(AuthApi.close, {id: data.id}).then(res => {
        if (!res.data.code) {
          data.isOpen = false
          this.$message.success("关闭鉴权成功")
        }
      })
    },
    delAuth(data) {
      AuthApi.del({id: data.id.toString()})
          .then(res => {
            if (!res.data.code) {
              data = null
              this.$message.success("删除鉴权成功")
            }
          })
    }

  },
  mounted() {
    this.axios.get(AuthApi.list, {
      params: {
        current: 1,
        pageSize: 10
      }
    }).then(res => {
      this.datas = res.data.data.records
    })
  }
}
</script>

<style scoped>

</style>